<template>
	<view class="goodlist-item">
		
		<!-- 左侧盒子 -->
		<view class="goodlist-l">
			<!-- 使用 v-if 指令控制 radio 组件的显示与隐藏 -->
			<radio :checked="item.goods_state" color="#c00000" v-if="showRadio" @click="changestate"></radio>
			<!-- 商品左侧图片区域 -->
			<image class="goodlist-img" :src="item.goods_small_logo || this.defaultPic" mode=""></image>
		</view>
		
		<!-- 右侧盒子 -->
		<view class="goodlist-r">
			<!-- 商品标题 -->
			<view class="goodlist-name">{{item.goods_name}}</view>
			<view class="goodlist-r-b">
				<!-- 商品价格 -->
				<view class="goodlist-price">￥ {{item.goods_price | tofixed}}</view>
				<!-- 带加减按钮的数字输入框 -->
				<uni-number-box v-if="shownumberbox" @change="numchangeHandler" :min="1" :value="item.goods_count"></uni-number-box>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"my-goodlist",
		data() {
			return {
				// 默认的空图片
				defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
			};
		},
		props:{
			//商品列表信息
			item:{
				type:Object,
				default:{}
			},
			// 是否展示左侧的勾选状态
			showRadio:{
				type:Boolean,
				//如果外界未指定值 默认不展示 
				default:false
			},
			shownumberbox:{
				type:Boolean,
				default:false
			}
		},
		//处理价格使其保留两位小数
		filters:{
			tofixed(num){
				return Number(num).toFixed(2)
			}
		},
		methods:{
			// 是否选中状态
			changestate(){
				this.$emit('radio-change',{
					goods_id:this.item.goods_id,
					goods_state:!this.item.goods_state
				})
			},
			// NumberBox 组件的 change 事件处理函数
			numchangeHandler(value){
				// console.log('value:',value);
				this.$emit('num-change',{
					//商品id
					goods_id:this.item.goods_id,
					//商品数量
					goods_count:+value
				})
			}
		}
	}
</script>

<style lang="scss">
	.goodlist-item{
		display: flex;
		padding: 10px 0;
		border-bottom: 1px solid #f0f0f0;
		
		.goodlist-l{
			margin-right: 5px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.goodlist-img{
				width: 100px;
				height: 100px;
			}
		}
		.goodlist-r{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			
			.goodlist-name{
				font-size: 14px
			}
			.goodlist-r-b{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.goodlist-price{
					font-size: 18px;
					color: #c00000;
				}
			}
		}
	}
</style>